<template>
    <PageView :loading="companyInfoManagerStore.isPageLoading">
        <div style="display: flex; flex-direction: row; height: 100%; gap: 10px">
            <!-- 左侧机构筛选栏 -->
            <div class="div-container" style="display: flex; flex-direction: column; gap: 10px">
                <div style="width: 260px;">
                    <vxe-input style="width: 100%"
                               v-model="companyInfoManagerStore.companyName"
                               placeholder="请输入机构名称"
                               type="search"
                               clearable/>
                </div>

                <div style="flex: 1">
                    <vxe-tree
                        ref="treeRef"
                        :data="companyInfoManagerStore.orgTreeList"
                        :node-config="companyInfoManagerStore.treeNodeConfig"
                        trigger="node"
                        title-field="orgName"
                        key-field="orgId"
                        parent-field="orgParentId"
                        transform
                        icon-open="vxe-icon-square-minus"
                        icon-close="vxe-icon-square-plus"
                        show-line
                        @node-click="companyInfoManagerStore.handleNodeClick"/>
                </div>

                <vxe-button style="width: 100%"
                            icon="vxe-icon-add"
                            status="primary"
                            @click="addCompanyEvent"
                            content="新增机构"/>
            </div>

            <!-- 右侧内容区域 -->
            <div class="div-container" style="flex-grow: 1;">
                <vxe-tabs type="border-card" height="100%" padding>
                    <vxe-tab-pane title="基础信息" name="1">
                        <CompanyBaseInfoComponent v-if="companyInfoManagerStore.currentOrgData"/>
                    </vxe-tab-pane>

                    <vxe-tab-pane title="机构权限" name="2">
                        <CompanyPermissionComponent v-if="companyInfoManagerStore.currentOrgData"/>
                    </vxe-tab-pane>
                </vxe-tabs>
            </div>

            <!-- 新增机构弹窗 -->
            <CompanyAddComponent/>
        </div>
    </PageView>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import PageView from "@/views/layout/PageView.vue";
import { useCompanyInfoManagerStore } from "@/store/UseCompanyInfoManagerSotre.ts";
import CompanyBaseInfoComponent from "@/views/company/component/CompanyBaseInfoComponent.vue";
import { VxeTreeInstance } from "vxe-pc-ui";
import { OrganizationInfoVO } from "@/entiy/vo/OrganizationInfoVO.ts";
import CompanyPermissionComponent from "@/views/company/component/CompanyPermissionComponent.vue";
import CompanyAddComponent from "@/views/company/component/CompanyAddComponent.vue";
import { useAddCompanyStore } from "@/store/UseAddCompanyStore.ts";

const companyInfoManagerStore = useCompanyInfoManagerStore();
const addCompanyStore = useAddCompanyStore();

// 树的引用
const treeRef = ref<VxeTreeInstance<OrganizationInfoVO>>();

// 组件加载完成声明周期函数
onMounted(() => {
    companyInfoManagerStore.isPageLoading = true;
    companyInfoManagerStore.queryOrgTreeList().then(() => {
        const currentOrgData = companyInfoManagerStore.currentOrgData;
        treeRef.value?.setCurrentNodeId(currentOrgData.orgId)
    }).finally(() => {
        companyInfoManagerStore.isPageLoading = false;
    });
});

// 新增机构事件
const addCompanyEvent = () => {
    console.log("addCompanyEvent");
    addCompanyStore.show = true;
}
</script>
